<template>
  <div class="student-members-container">
    <div class="page-header">
      <h2>学生列表</h2>
      <el-button type="primary" @click="goBack">返回班级列表</el-button>
    </div>
    
    <div class="class-info">
      <h3>{{ className }}</h3>
      <p>班级代码：{{ classCode }}</p>
    </div>
    
    <el-card class="student-list-card">
      <template #header>
        <div class="card-header">
          <span>班级学生信息</span>
          <span class="student-count">共 {{ students.length }} 名学生</span>
        </div>
      </template>
      
      <el-table :data="students" style="width: 100%">
        <el-table-column prop="studentId" label="学号" width="180">
          <template #default="scope">
            <span>{{ scope.row.studentId || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="realName" label="姓名" width="150">
          <template #default="scope">
            <span>{{ scope.row.realName || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="nickName" label="昵称" width="180">
          <template #default="scope">
            <span>{{ scope.row.nickName || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="gender" label="性别" width="120">
          <template #default="scope">
            <span>{{ scope.row.gender === '0' ? '男' : scope.row.gender === '-1' ? '女' : scope.row.gender === null ? '未知' : scope.row.gender || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="age" label="年龄" width="120">
          <template #default="scope">
            <span>{{ scope.row.age || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="avatar" label="头像" width="150">
          <template #default="scope">
            <el-avatar :src="scope.row.avatar" size="small">
              <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="头像">
              <span v-else>{{ scope.row.realName?.substring(0, 1) || '学' }}</span>
            </el-avatar>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="danger" size="small" @click="removeStudent(scope.row)" :loading="removingStudent === scope.row.studentId">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { userAPI } from '@/api/user.js'

export default {
  name: 'StudentMembers',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const classCode = ref(route.query.classCode || '')
    const className = ref(route.query.className || '')
    const students = ref([])
    const loading = ref(false)
    const removingStudent = ref(null)

    // 加载班级学生列表
    const loadStudentList = async () => {
      if (!classCode.value) {
        ElMessage.warning('请提供班级代码')
        return
      }

      loading.value = true
      try {
        // 根据后端API返回格式调整请求
        // 从截图看，后端直接返回学生数组，不包含额外的code等字段
        const response = await userAPI.getStudentList(classCode.value)
        
        // 假设response就是学生数组
        students.value = Array.isArray(response) ? response : []
        
        // 使用从路由传递的班级名称，如果没有则使用默认格式
        if (!className.value) {
          className.value = `班级 ${classCode.value}`
        }
      } catch (error) {
        ElMessage.error('加载学生列表失败')
        console.error('Failed to load student list:', error)
      } finally {
        loading.value = false
      }
    }

    // 移除学生
    const removeStudent = async (student) => {
      try {
        await ElMessageBox.confirm(
          `确定要移除学生 ${student.realName || student.studentId} 吗？`,
          '确认移除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        removingStudent.value = student.studentId
        // 调用后端API移除学生
        await userAPI.removeStudent(classCode.value, student.studentId)
        
        // 从列表中移除学生
        students.value = students.value.filter(s => s.studentId !== student.studentId)
        ElMessage.success('学生移除成功')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('移除学生失败')
          console.error('Failed to remove student:', error)
        }
      } finally {
        removingStudent.value = null
      }
    }

    // 返回上一页
    const goBack = () => {
      router.push('/student-classes')
    }

    onMounted(() => {
      loadStudentList()
    })

    return {
      classCode,
      className,
      students,
      loading,
      removingStudent,
      loadStudentList,
      removeStudent,
      goBack
    }
  }
}
</script>

<style scoped>
.student-members-container {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0;
  font-size: 36px;
  color: #333;
  font-weight: bold;
}

.class-info {
  background-color: #f8f9fa;
  padding: 25px 30px;
  border-radius: 12px;
  margin-bottom: 30px;
  border-left: 6px solid #409eff;
}

.class-info h3 {
  margin: 0 0 10px 0;
  font-size: 28px;
  color: #333;
}

.class-info p {
  margin: 0;
  color: #666;
  font-size: 20px;
}

.student-list-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  overflow: hidden;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
}

.student-count {
  font-size: 18px;
  color: #666;
  font-weight: normal;
}

/* 调整表格样式，使内容更大 */
.el-table {
  border-radius: 12px;
  overflow: hidden;
  font-size: 18px;
}

.el-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  font-size: 18px;
  padding: 20px 10px;
}

.el-table td {
  padding: 20px 10px;
  font-size: 18px;
}

.el-table tr:hover > td {
  background-color: #f5f7fa;
}

/* 调整按钮大小 */
.el-button {
  font-size: 16px;
  padding: 10px 20px;
}

.el-button--small {
  font-size: 16px;
  padding: 8px 16px;
}

/* 调整头像大小 */
.el-avatar {
  width: 50px !important;
  height: 50px !important;
  font-size: 24px !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-members-container {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-header h2 {
    margin-bottom: 10px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .student-count {
    margin-top: 5px;
  }
}
</style>